﻿@typeparam TValue
@inherits TextInputBase<TValue>

<div>
@if (!string.IsNullOrEmpty(UseLabel))
{
    <label for=@Id class="block text-sm font-medium text-gray-700">@UseLabel</label>
}
    <div class="mt-1 relative rounded-md shadow-sm">
        <input type=@UseType class=@ClassNames("block w-full sm:text-sm rounded-md", 
            CssClass("shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300", 
                     "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500")) 
                id=@Id name=@Id @bind="CurrentValue" placeHolder=@UsePlaceholder @bind:event="oninput" @attributes="IncludeAttributes">
    @if (HasErrorField)
    {
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <!-- Heroicon name: solid/exclamation-circle -->
            <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
        </div>
    }
    </div>
    @if (HasErrorField)
    {
        <p class="mt-2 text-sm text-red-500" id=@($"{Id}-error")>@ErrorFieldMessage</p>
    }
    else if (!string.IsNullOrEmpty(UseHelp))
    {
        <p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
    }
</div>
